<template>
  <!--用户列表-->
  <div class="statistics-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="8">
        <el-button type="primary" @click="serve()">服务标签</el-button>
        <!-- <el-button type="primary" @click="need()">需求标签</el-button> -->
				<el-button type="primary" @click="masterList()">大咖列表</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="16">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryForm.keyword"
              style="margin-right: 10px"
              placeholder="请输入姓名或手机号"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh-right"
              @click="restart"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <!-- <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        sortable
        type="index"
      /> -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="mobile"
        label="手机号"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="nickname"
        label="昵称"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="user_label_info"
        label="标签"
      />
      <el-table-column align="center" label="操作">
        <template #default="{ row }">
          <el-button
            v-show="row.user_auth && row.user_auth.length>0 && row.user_auth.includes(1) == true"
            type="text"
            @click="companys(row)"
          >
            企业认证
          </el-button>
          <el-button
            v-show="row.user_auth && row.user_auth.length>0 && row.user_auth.includes(2) == true"
            type="text"
            @click="users(row)"
          >
            个人认证
          </el-button>
					<el-button
					  v-if="row.user_master_is == 2"
					  type="text"
					  @click="send(row)"
					>
					  添加成为大咖
					</el-button>
					<el-button
					  v-if="row.user_master_is == 1"
					  type="warning"
					  @click="del(row)"
					>
					  取消大咖身份
					</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看认证 -->
    <el-dialog :title="authtit" :visible.sync="dialogDetail">
      <div class="detail-cont" :model="details">
        <div v-show="userAuth">
          <div class="list">
            手机号:
            <span>{{ userfor.mobile }}</span>
          </div>
          <div class="list">
            姓名:
            <span>{{ userfor.nickname }}</span>
          </div>
          <div class="list">
            银行:
            <span>{{ userfor.bank }}</span>
          </div>
          <div class="list">
            银行卡号:
            <span>{{ userfor.bank_card }}</span>
          </div>
          <div class="list">
            身份证:
            <span>{{ userfor.identity }}</span>
          </div>
          <div class="list">
            地址:
            <span>{{ authfor['地址'] }}</span>
          </div>
          <div class="list">
            性别:
            <span>{{ authfor['性别'] }}</span>
          </div>
          <div class="list">
            身份证正面:
            <span>
              <image style="width: 50px" :src="authfor['身份证正面']" />
            </span>
          </div>
          <div class="list">
            身份证反面:
            <span>
              <image style="width: 50px" :src="authfor['身份证反面']" />
            </span>
          </div>
        </div>
        <div v-show="companyAuth">
          <div class="list">
            公司名:
            <span>{{ userfor.company_name }}</span>
          </div>
          <div class="list">
            税号:
            <span>{{ userfor.s_number }}</span>
          </div>
          <div class="list">
            营业执照:
            <span>
              <image style="width: 50px" :src="authfor['营业执照']" />
            </span>
          </div>
          <!-- <div class="list">
            开户许可证:
            <span>
              <image style="width: 50px" :src="authfor['开户许可证']" />
            </span>
          </div> -->
        </div>
      </div>
    </el-dialog>

    <!-- 一级标签 -->
    <el-dialog :title="wintit" :visible.sync="dialogFormVisible">
      <el-button type="primary" @click="addOnetag()">添加标签</el-button>
      <el-table
        v-loading="listLoading"
        :data="labels"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="序号"
          sortable
          type="index"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="label_name"
          label="标签名称"
        />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editOnetag(scope)">编辑</el-button>
            <el-button type="text" @click="tagTwo(scope.row)">
              二级标签
            </el-button>
            <el-button type="text" @click="delOnetag(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 操作一级标签 -->
    <el-dialog :title="onetag" :visible.sync="dialogOnetag">
      <el-input v-model="onetagName" clearable />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogOnetag = false">取 消</el-button>
        <el-button v-show="addtype" type="primary" @click="addtag()">
          确 定
        </el-button>
        <el-button v-show="edittype" type="primary" @click="editTag()">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <!-- 二级标签 -->
    <el-dialog :title="wintit" :visible.sync="dialogFormTwo">
      <el-button type="primary" @click="twotags()">添加二级标签</el-button>
      <el-table
        v-loading="listLoading"
        :data="labelsTwo"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="序号"
          sortable
          type="index"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="label_name"
          label="标签名称"
        />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editTwotag(scope.row)">编辑</el-button>
            <el-button type="text" @click="delTwotag(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 操作二级标签 -->
    <el-dialog :title="twotag" :visible.sync="dialogTwotag">
      <el-input v-model="twotagName" clearable />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTwotag = false">取 消</el-button>
        <el-button v-show="addtype" type="primary" @click="addTwotag()">
          确 定
        </el-button>
        <el-button v-show="edittype" type="primary" @click="saveTwotag()">
          确 定
        </el-button>
      </div>
    </el-dialog>

		<!-- 大咖列表 -->
		<el-dialog title="大咖列表" :visible.sync="dialogMaster">
		  <el-table
		    v-loading="listLoading"
		    :data="masters"
		    @selection-change="setSelectRows"
		  >
		    <el-table-column
		      align="center"
		      show-overflow-tooltip
		      label="序号"
		      sortable
		      type="index"
		    />
		    <el-table-column
		      align="center"
		      show-overflow-tooltip
		      prop="appid_info.nickname"
		      label="用户名"
		    />
		    <el-table-column
		      align="center"
		      show-overflow-tooltip
		      prop="appid_info.mobile"
		      label="手机号"
		    />
		    <el-table-column align="center" show-overflow-tooltip label="头像">
		      <template #default="{ row }">
		        <el-image
		          style="width: 60px; height: 60px"
		          :src="row.appid_info.logo"
		          :preview-src-list="[row.appid_info.logo]"
		        />
		      </template>
		    </el-table-column>
		    <el-table-column
		      align="center"
		      show-overflow-tooltip
		      prop="order"
		      label="排序"
		    />
		    <el-table-column align="center" label="操作">
		      <template #default="{ row }">
		        <el-button type="text" @click="edit(row)">编辑</el-button>
		        <el-button type="text" @click="del2(row)">删除</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
			<el-pagination
			    background
			    :current-page="queryForm.page"
			    :page-size="queryForm.list_row"
			    :layout="layout"
			    :total="totalMaster"
			    @size-change="winSizeChange"
			    @current-change="winCurrentChange"
			  />
			</el-dialog>

			<!-- 编辑 -->
			<el-dialog title="编辑排序" :visible.sync="dialogEdit">
			  <el-input v-model="sort" clearable />
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogEdit = false">取 消</el-button>
			    <el-button type="primary" @click="save()">确 定</el-button>
			  </div>
			</el-dialog>

    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  import {
    getUserLists,
    getAuthDatas,
    getLabelBaseLists,
    addLabelBases,
    delLabelBases,
    editBaseLabels,
    getLabelLists,
    addLabels,
    delLabels,
    editLabels,
		getAppMasterJoins,
		addAppMasterJoins,
		delAppMasterJoins,
		editAppMasterJoins,
  } from '@/api/common'

  export default {
    name: 'User',
    data() {
      return {
        queryForm: {
          page: 1,
          list_row: 10,
          keyword: '',
        },
        listLoading: false,
        wintit: '',
        list: [
          {
            title: '名称',
            user: '张三',
            to: '李四',
            statu: 1,
            create_time: '2021-01-01 12:01',
            back_time: '2021-01-08 12:01',
          },
        ],
        labels: [],
        labelsTwo: [],
				masters: [],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        tagType: '',
        dialogDetail: false,
        authtit: '',
        details: '',
        userfor: '',
        authfor: '',
        userAuth: false,
        companyAuth: false,
        dialogFormVisible: false,
        dialogFormTwo: false,
        onetagName: '',
        twotagName: '',
        onetagId: 0,
        twotagId: 0,
        onetag: '',
        dialogOnetag: false,
        dialogTwotag: false,
        addtype: false,
        edittype: false,
				dialogMaster: false,
				dialogEdit: false,
				totalMaster: '',
				sort: '',
				superid: '',
        twotag:'',
      }
    },
    created() {
      this.getData()
    },
    methods: {
      handleDetail() {},
      //搜索
      search() {
        this.getData()
      },
      restart() {
        this.queryForm = []
        this.getData()
      },
      getData() {
        let params = {
          page: this.queryForm.page,
          limit: this.queryForm.list_row,
          search_data: this.queryForm.keyword,
          type: 2,
        }
        getUserLists(params).then((data) => {
          this.list = data.data
          this.total = data.count
        })
				getAppMasterJoins(params).then((data) => {
				  this.masters = data.data
				  this.totalMaster = data.count
				})
      },

      users(row) {
        this.dialogDetail = true
        this.authtit = '个人认证'
        this.userAuth = true
        this.companyAuth = false
        let params = {
          type: 2,
          app_id: row.id,
        }
        getAuthDatas(params).then((data) => {
          this.details = data.data
          this.userfor = data.data.auth_data
          this.authfor = data.data.auth_data_res
        })
      },
      companys(row) {
        this.dialogDetail = true
        this.authtit = '企业认证'
        this.userAuth = false
        this.companyAuth = true
        let params = {
          type: 1,
          app_id: row.id,
        }
        getAuthDatas(params).then((data) => {
          this.details = data.data
          this.userfor = data.data.auth_data
          this.authfor = data.data.auth_data_res
        })
      },

      serve() {
        this.dialogFormVisible = true
        this.wintit = '服务标签'
        this.tagType = 6
        let params = {
          type: this.tagType,
        }
        getLabelBaseLists(params).then((data) => {
          this.labels = data.data
          this.total = data.count
        })
      },
      need() {
        this.dialogFormVisible = true
        this.wintit = '需求标签'
        this.tagType = 5
        let params = {
          type: this.tagType,
        }
        getLabelBaseLists(params).then((data) => {
          this.labels = data.data
          this.total = data.count
        })
      },
      addOnetag() {
        this.dialogOnetag = true
        this.addtype = true
        this.edittype = false
        this.onetag = '添加一级标签'
        this.onetagName = ''
      },
      addtag() {
        let params = {
          type: this.tagType,
          label_name: this.onetagName,
        }
        addLabelBases(params).then((data) => {
          this.$message.success('添加成功！')
          this.dialogOnetag = false
          if (this.tagType == 6) {
            this.serve()
          } else {
            this.need()
          }
        })
      },
      delOnetag(row) {
        let params = {
          id: row.id,
        }
        delLabelBases(params).then((data) => {
          this.$message.success('删除成功！')
          if (this.tagType == 6) {
            this.serve()
          } else {
            this.need()
          }
        })
      },
      editOnetag(row) {
        this.dialogOnetag = true
        this.onetag = '修改标签'
        this.addtype = false
        this.edittype = true
        this.onetagName = this.labels[row.$index].label_name
        this.onetagId = row.row.id
      },
      editTag(row) {
        let params = {
          label_name: this.onetagName,
          id: this.onetagId,
        }
        editBaseLabels(params).then((data) => {
          this.$message.success('修改成功！')
          this.edittype = false
          if (this.tagType == 6) {
            this.serve()
          } else {
            this.need()
          }
        })
        this.dialogOnetag = false;
      },

      tagTwo(row) {
        this.dialogOnetag = false
        this.dialogFormTwo = true
        this.wintit = '二级标签'
        this.onetagId = row.id
        let params = {
          type: this.tagType,
          label_base_id: row.id,
        }
        getLabelLists(params).then((data) => {
          this.labelsTwo = data.data
          this.total = data.count
        })
      },
      tagTwo2(row) {
        let params = {
          type: this.tagType,
          label_base_id: this.onetagId,
        }
        getLabelLists(params).then((data) => {
          this.labelsTwo = data.data
          this.total = data.count
        })
      },
      twotags() {
        this.dialogTwotag = true
        this.addtype = true
        this.edittype = false
        this.twotag = '添加二级标签'
        this.twotagName = ''
      },
      addTwotag() {
        let params = {
          type: this.tagType,
          label_name: this.twotagName,
          label_base_id: this.onetagId,
        }
        addLabels(params).then((data) => {
          this.$message.success('添加成功！')
          this.tagTwo2()
        })
        this.dialogTwotag = false
      },
      delTwotag(row) {
        let params = {
          id: row.id,
        }
        delLabels(params).then((data) => {
          this.$message.success('删除成功！')
          this.tagTwo2()
        })
      },
      editTwotag(row) {
        this.dialogTwotag = true
        this.twotag = '修改标签'
        this.addtype = false
        this.edittype = true
        console.log(222,row)
        this.twotagName = row.label_name
        this.twotagId = row.id
      },
      saveTwotag(row) {
        let params = {
          label_name: this.twotagName,
          id: this.twotagId,
        }
        editLabels(params).then((data) => {
          this.$message.success('修改成功！')
          this.edittype = false
          this.tagTwo2()
        })
        this.dialogTwotag = false
      },
			masterList() {
				this.dialogMaster = true
			},
			send(row) {
			  let params = {
			    id: row.id,
			  }
			  addAppMasterJoins(params).then((data) => {
			    this.$message.success('添加成功！')
			    this.getData()
			    this.dialogFormVisible = false
			  })
			},
			del(row) {
			  let params = {
			    id: row.id,
			  }
			  delAppMasterJoins(params).then((data) => {
			    this.$message.success('删除成功！')
			    this.getData()
			  })
			},
      del2(row) {
        let params = {
          id: row.app_id,
        }
        delAppMasterJoins(params).then((data) => {
          this.$message.success('删除成功！')
          this.getData()
        })
      },

			edit(row) {
			  this.dialogEdit = true
			  this.superid = row.id
			},
			save() {
			  let params = {
			    id: this.superid,
			    order: this.sort,
			  }
			  editAppMasterJoins(params).then((data) => {
			    this.$message.success('修改成功！')
			    this.getData()
			    this.dialogEdit = false
			  })
			},
      setSelectRows() {},
      handleSizeChange(val) {
        this.queryForm.list_row = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
			winSizeChange(val) {
			  this.queryForm.list_row = val
			  this.getData()
			},
			winCurrentChange(val) {
			  this.queryForm.page = val
			  this.getData()
			},
    },
  }
</script>

<style lang="scss" scoped>
  .el-button {
    font-size: 14px;
  }
  .detail-cont {
    .list {
      margin-bottom: 20px;
      span {
        margin-left: 20px;
      }
    }
  }
</style>
